<template>
	<div class="top">
		<tabswitch :list="tabs" :default-value="tabType" :showRange="true" :isTab="true" @change="changeTab" show-allrange />
		<div style="height: 20px"></div>
    <div v-if="tabType==='终端贡献'">
      <gxZd ref="gxRef" :range="range" :tab-type="tabType"></gxZd>
    </div>
    <div v-if="tabType==='单品贡献'">
      <gxGood ref="gxRef" :range="range" :tab-type="tabType"></gxGood>
    </div>
    <div v-if="tabType==='终端分类贡献'">
      <gxZdcat ref="gxRef" :range="range" :tab-type="tabType"></gxZdcat>
    </div>
    <div v-if="tabType==='商品分类贡献'">
      <gxGoodcat ref="gxRef" :range="range" :tab-type="tabType"></gxGoodcat>
    </div>
	</div>
</template>
<script setup>
import tabswitch from '@/views/home/tabswitch.vue';
import gxZd from './gx_zd.vue'
import gxGoodcat from './gx_goodcat.vue'
import gxZdcat from './gx_zdcat.vue'
import gxGood from './gx_good.vue'
import {nextTick, ref} from "vue";
const gxRef = ref()
const tabs = ref([
  {text: '终端贡献'},
  {text: '终端分类贡献'},
  {text: '单品贡献'},
  {text: '商品分类贡献'},
])
const tabType =ref('终端贡献')
const range =ref('近一周')
const changeTab = (val) => {
  tabType.value = val.billType
  range.value = val.range
  nextTick(() => {
    gxRef.value.getList()
  })
}
</script>

<style scoped lang="scss"></style>